<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}">
</head>
<body>
<h1>Design your taco!</h1>
<img th:src="@{/images/TacoCloud.png}"/>

<form method="post" th:object="${taco}">

    <span class="validationError" th:if="${#fields.hasErrors('ingredients')}"
          th:errors="*{ingredients}">Ingredient Error</span>

    <div class="grid">
        <div id="wraps" class="ingredient-group">
            <h3>Designate your wrap:</h3>
            <div th:each="ingredient : ${wrap}">
                <input type="checkbox" name="ingredients" th:value="${ingredient.id}"/>
                <span th:text="${ingredient.name}">INGREDIENT</span>
                <br/>
            </div>
        </div>

        <div id="proteins" class="ingredient-group">
            <h3>Pick your protein:</h3>
            <div th:each="ingredient : ${protein}">
                <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                <span th:text="${ingredient.name}">INGREDIENT</span>
                <br/>
            </div>
        </div>

        <div id="cheeses" class="ingredient-group">
            <h3>Choose your cheese:</h3>
            <div th:each="ingredient : ${cheese}">
                <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                <span th:text="${ingredient.name}">INGREDIENT</span>
                <br/>
            </div>
        </div>

        <div id="veggies" class="ingredient-group">
            <h3>Determine your veggies:</h3>
            <div th:each="ingredient : ${veggies}">
                <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                <span th:text="${ingredient.name}">INGREDIENT</span>
                <br/>
            </div>
        </div>

        <div id="sauces" class="ingredient-group">
            <h3>Select your sauce:</h3>
            <div th:each="ingredient : ${sauce}">
                <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                <span th:text="${ingredient.name}">INGREDIENT</span>
                <br/>
            </div>
        </div>
    </div>

    <div>
        <h3>Name your taco creation:</h3>
        <input type="text" th:field="*{name}">
        <span th:if="${#fields.hasErrors('name')}" th:text="*{name}">XXX</span>
        <span class="validationError" th:if="${#fields.hasErrors('name')}"
              th:errors="*{name}">Name Error</span>
        <br/>
        <button>Submit your taco</button>
    </div>
</form>
</body>
</html>